<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<c:set var="HOME" value="${pageContext.request.contextPath}"  scope="application"/>
<c:set var="SPRINGMVC" value="${pageContext.request.contextPath}/app"   scope="application"/>
<c:set var="IMG" value="${HOME}/images"   scope="application"/>
<c:set var="JS" value="${HOME}/common/client/js"   scope="application"/>
<c:set var="CSS" value="${HOME}/common/client/css"   scope="application"/>    
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>로그인 페이지</title>
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
	<script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
	
	<style type="text/css">
#dashed{
	border-style: dashed;
	border-spacing:10px;
	border-width : 1px;
	padding-bottom: 15px; 
	padding-left: 15px; 
	padding-top: 15px;
	width: 400px;
	height: 95%;
	text-align:center;
}
	</style>
	
	
	
	<script type="text/javascript">
function login(){
	document.loginForm.action = 'asdf';
	document.loginForm.submit();
}	

	</script>
	
  </head>
  <body>
  	<section data-role="page" id="login" data-fullscreen="false">
		<div id="dashed">
			<form name="loginForm" method="post">
			<table  style="border: 1px solid; width:90%; height350px;">
				<colgroup>
					<col width="100px">
					<col width="*">
				</colgroup>
				<tr>
					<td>
						<font size="1"> 아이디</font>
					</td> 
					<td>
						<input type="tel" name="user_id" id ="user_id" style="width:90%;"/>
					</td>
				</tr>
				<tr>
					<td>
						<font size="1"> 비밀번호</font>
					</td> 
					<td>
						<input type="text" name="user_pw" id="user_pw"  style="width:90%;"/>
					</td>
				</tr>
				<tr>
					<td colspan="3">
						<fieldset class="ui-grid-b">
							<div class="ui-block-a">
								<a href="./join.jsp" data-role="button">가입</a>
							</div>
							<div class="ui-block-b">
								<input type="button" id="login_button" value="로그인" data-role="button" data-theme="b" />
							</div>
							<div class="ui-block-c">
								<input type="reset" value="취소" data-role="button" />
							</div>
						</fieldset>
					</td>
				</tr>
			</table>	
			</form>
			<form name="okform">
			</form>	
		</div>  		
    </section>
    
    <script>
$('#login_button').click(function(){
	
	
	$.ajax({
		  type: 'post',
		  url: '<c:out value="${SPRINGMVC }"/>/client/check_login',
		  data:"user_id="+$('#user_id').val() + '&user_pw=' + $('#user_pw').val() ,
		  success: function(message){
		    if(message == 'y'){
		    	
		    	var f = document.okform;
		    	f.action = "<c:out value="${SPRINGMVC }"/>/client/item_list";
		    	f.submit();
		    	
		    }else{
		    	alert('아이디(전화번호) 또는 비밀번호가 틀렸습니다');
		    }
		    
		  },fail:function(error){
		    	alert('로그인중 문제가 발생하였습니다');
		  }
		});
	
});  
    </script>
  </body>
</html>